Single Page Application (SPA) 的其中一個特色為：透過定義一個隨著網址或路由 (router) 切換而改變的容器來包覆動態內容，而不是重新載入整個頁面，以減少重複資源的重新載入
在 public 資料夾下的 index.html 即作為包覆整個頁面的外層框，可以在內容看到:

<div id="app"></div>

此處的 app 僅代表 的 id，實際上 Vue 創建的 DOM 即會以 id 來尋找需要取代的對象，保留這份檔案的內
容，更改 main.js 的內容來建立新的 vue app instance
透過 vue-cli 自動建立的檔案中，可以找到 main.js 作為 Vue 的實體建立設置，內容已經包含：

new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');

先將已有的內容註解，放入以下內容:

new Vue({
render: h => h(ProductApp),
}).$mount('#app');

在 src 底下新增一個 ProductApp.vue 對象，並在 main.js 引入

<!-- ProductApp.vue -->
<template>
<h1>Product App!</h1>
</template>

/* main.js */
import ProductApp from './ProductApp.vue';
new Vue({
render: h => h(ProductApp),
}).$mount('#app');

npm run serve 啟動伺服器監聽: